<template>
  <div class="text-summary-page">
    <!-- 返回首页按钮 -->
    <div class="header">
      <el-button 
        type="primary" 
        @click="goToHome" 
        class="back-button"
        icon="el-icon-arrow-left"
      >
        🏠点击返回首页
      </el-button>
    </div>

    <div class="content-container">
      <h1 class="page-title">🤖智能文本摘要</h1>
      <p class="page-subtitle">📕基于AI的文本自动摘要生成工具</p>

      <div class="input-section">
        <el-card class="input-card">
          <template #header>
            <div class="card-header">
              <span>📋输入文本</span>
              <el-tag type="info" size="small">🗣️支持中文、英文等多语言</el-tag>
            </div>
          </template>
          
          <el-form :model="form" label-width="120px">
            <el-form-item label="文本内容">
              <el-input
                v-model="form.text"
                type="textarea"
                :rows="8"
                placeholder="请输入需要摘要的文本内容..."
                maxlength="10000"
                show-word-limit
              />
            </el-form-item>

            <el-form-item label="摘要长度">
              <el-radio-group v-model="form.lengthType">
                <el-radio label="min">最小长度</el-radio>
                <el-radio label="max">最大长度</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="长度值">
              <el-slider
                v-model="form.lengthValue"
                :min="20"
                :max="300"
                :step="10"
                show-input
              />
            </el-form-item>

            <el-form-item>
              <el-button 
                type="primary" 
                @click="generateSummary" 
                :loading="loading"
                :disabled="!form.text.trim()"
                size="large"
              >
                生成摘要
              </el-button>
              <el-button @click="clearText" size="large">🗑️清空</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <div class="result-section" v-if="result.summary">
        <el-card class="result-card">
          <template #header>
            <div class="card-header">
              <span>摘要结果</span>
              <el-tag type="success" size="small">AI生成</el-tag>
            </div>
          </template>
          
          <div class="result-content">
            <el-alert
              v-if="result.success"
              title="摘要生成成功"
              type="success"
              :description="`原文长度: ${result.original_length} 字符 → 摘要长度: ${result.summary_length} 字符`"
              show-icon
              :closable="false"
            />
            
            <div class="summary-text">
              <h4>摘要内容：</h4>
              <p>{{ result.summary }}</p>
            </div>

            <div class="result-actions">
              <el-button 
                type="success" 
                @click="copySummary" 
                size="small"
                icon="el-icon-document-copy"
              >
                复制摘要
              </el-button>
            </div>
          </div>
        </el-card>
      </div>

      <div class="error-section" v-if="error">
        <el-alert
          :title="error"
          type="error"
          show-icon
          :closable="false"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()

// 表单数据
const form = reactive({
  text: '',
  lengthType: 'max',  // 'min' 或 'max'
  lengthValue: 150
})

// 结果数据
const result = reactive({
  summary: '',
  original_length: 0,
  summary_length: 0,
  success: false
})

// 状态管理
const loading = ref(false)
const error = ref('')

// 返回首页
const goToHome = () => {
  router.push('/')
}

// 生成摘要
const generateSummary = async () => {
  if (!form.text.trim()) {
    ElMessage.warning('请输入需要摘要的文本')
    return
  }

  loading.value = true
  error.value = ''

  try {
    // 根据选择的长度类型构建参数
    const params = {
      text: form.text.trim()
    }
    
    if (form.lengthType === 'min') {
      params.min_length = form.lengthValue
    } else {
      params.max_length = form.lengthValue
    }

    const response = await axios.post('/api/text-summary', params)
    
    if (response.data.success) {
      Object.assign(result, response.data)
      ElMessage.success('摘要生成成功！')
    } else {
      error.value = response.data.error || '摘要生成失败'
      ElMessage.error(error.value)
    }
  } catch (err) {
    error.value = err.response?.data?.error || '网络错误，请稍后重试'
    ElMessage.error(error.value)
  } finally {
    loading.value = false
  }
}

// 清空文本
const clearText = () => {
  form.text = ''
  result.summary = ''
  result.original_length = 0
  result.summary_length = 0
  result.success = false
  error.value = ''
}

// 复制摘要
const copySummary = async () => {
  try {
    await navigator.clipboard.writeText(result.summary)
    ElMessage.success('摘要已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败，请手动选择复制')
  }
}
</script>

<style scoped>
@import '../assets/TextSummary.css';
</style>
